//声明
var code;
//获取 id=‘char’的section
var charBox = document.getElementById('char');
//声明一个变量，记录正确的个数
var okcount = 0;
var errorcount=0;

// 1.从 A ~ Z 这26个字母中，随机抽出一个;
// 然后显示在页面上（实际就是修改id='id=char' 这个section中的文本内容）
function show(){
    // 在    ACSII 编码中，大写字母（A~Z）26个英文字母
    //对应的 ACSII码 是：65~90.
    //怎么产生65~90之间的随机数？


    //'=',赋值符号，运算顺序是从右往左。
    //产生一个（0~1）之间的随机数
    var random = Math.random();
    code = random * 26; //[0 26] 
    code = Math.floor(code);//[0 25] + 65
    code = code +65;//[65 90]


    //将 ACSII码 转换为字符
    var char = String.fromCharCode(code);
    //修改 id= 'char'中的文本内容
    charBox.innerText = char;

}
show();


// 2.比较 随机出来的字母 与 敲击键盘上的字母 是否相同；
// 如果相同，再次随机出来一个字母，显示到页面上（实际上就是1）；
// 如果不相同，那么只做一个动画就可以了；


window.onkeyup = function(event){
    // alert(event.keyCode);
    var key = event.keyCode;
    if(code == key){
        // alert('输入正确')
        // 再次执行 show()方法，产生一个新的字母
        show();
        charBox.className = 'animated zoomIn';
    //延迟几秒后，清除动画
    setTimeout(clearanimate,500);
    //alert('输错了，重新再来')
    //okcount++
    okcount = okcount + 1;
    
    }
else{
    charBox.className = 'animated shake';
    setTimeout(clearanimate,500);
    errorcount++;
    }
    showresult();

}


//清除动画
function clearanimate(){
    charBox.className='';
}
// 3.计算zhengquelv ： 正确的数量/（正确的数量+错误的数量）=正确率；
function showresult(){
    var zhengquelv=okcount/(okcount+errorcount)*100;
    var resultbox=document.getElementById('result');
    resultbox.innerText='正确'+okcount+'个'
                        +'错误'+errorcount+'个'
                        +'正确率'+zhengquelv+'%'
}